<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane label="产业概览" name="first">
            <div class="wrapper main-wrapper row">
                <div class="col-lg-12">
                    <section class="box nobox marginBottom0">
                        <div class="content-body">
                            <div class="row">
                                <smallCard>
                                    <template #cardbox>
                                        <div class="stats">
                                            <h3 class="color-white numbers">143352</h3>
                                            <span> 企业总数量</span>
                                        </div>
                                    </template>
                                </smallCard>
                                <smallCardHover>
                                    <template #textOne>
                                        <div class="stats">
                                            <h3 class="numbers">2483</h3>
                                            <span> 高新企业总数量</span>
                                        </div>
                                    </template>
                                </smallCardHover>
                                <smallCardHover>
                                    <template #textTwo>
                                        <div class="stats">
                                            <h3 class="numbers">367474</h3>
                                            <span> 2+4+6 企业总数量</span>
                                        </div>
                                    </template>
                                </smallCardHover>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-8">
                    <mainImage title="纯量企业发展逐年分析" style="background-color: #ffffff;
												margin: 15px 0;
												overflow: hidden;
												box-shadow: 0 2px 28px rgba(0, 0, 0, .1);
												border-bottom: 3px solid rgb(64, 158, 255);">
                        <template #mianMap>
                            <div class="row" style="height: 545px;">
                                <div class="col-xs-12">
                                    <div class="row">
                                        <div class="panel-box">
                                            <div class="panel-box-content">
                                                <div id="visitor" style="height:545px;"></div>
                                                <div class="custom-label">2013年以前</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </mainImage>
                </div>
                <div class="col-lg-4">
                    <sameCard title="招商工具集">
                        <template #tool>
                            <div
                                style="width:100%;background: linear-gradient(#9d73fa,#3d5ae6);padding-top: 15px; height: 540px;">
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagemb">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-document-copy />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">目标客户池</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagewdsc">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-collection-tag />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">我的收藏</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagexs">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-connection />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">线索管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagexsfp">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-files />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">线索分派</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagexsgj">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-position />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">线索跟进</span>

                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagewdxs">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-folder-checked />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">我的线索</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagebb">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-folder-opened />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">客户报备</span>
                                    </div>
                                </div>

                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagelx">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-message />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">联系客户</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagelxrgl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-chat-line-square />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">联系人管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagexjgl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-coin />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">询价管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagebjgl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-money />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">报价管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagebjsp">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-document-checked />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">报价审批</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px; " @click="navigateToTargetPagezc">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-document />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">招商政策</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagesq">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-copy-document />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">政策申请</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagesqjd">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-finished />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">申请进度</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPageclgl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-magic-stick />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">策略管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPageyygl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-discount />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">预约管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagerzgl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-office-building />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">入驻管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagesfgl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-collection />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">收费管理</span>
                                    </div>
                                </div>
                                <div class="col-xs-4" style="padding: 10px;" @click="navigateToTargetPagetzgl">
                                    <div class="icon-box">
                                        <label
                                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;color: #fff;display: flex;align-items: center; justify-content: center;"><el-icon
                                                class="el-icon" style="font-size: 26px;">
                                                <el-icon-crop />
                                            </el-icon></label><span
                                            style="font-size:12px ;color: #fff;display: flex;justify-content: center;">退租管理</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </sameCard>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-8 pie">
                    <div class="pie-item">
                        <mainImage title="丰台区产业分布">
                            <template #mianMap>
                                <div class="pie-box">
                                    <div class="map-item">
                                        <pieMap></pieMap>
                                    </div>
                                    <div class="map-text">
                                        <div class="text-inner">
                                            <p class="text-title">丰台区企业产业分布详情</p>
                                            <div class="top-text">
                                                <p class="text-content">
                                                    通过数据清洗，采集收录了145652家丰台区企业的工商数据，并进行了产业类别标注，一级分类为两部分：2+4+6核心产业、其他非核心产业。
                                                </p>
                                            </div>
                                            <div class="sec-text">
                                                <div class="single-box">
                                                    <div class="inner-title">
                                                        <p class="text-title">2+4+6核心产业</p>
                                                    </div>
                                                    <p class="text-content">
                                                        2+4+6核心产业报告：轨道交通、航空航天两大主导产业；新兴金融、高端商务、智能制造、数字经济四大重点产业；智能建造、商用密码、综合能源管理、新材料、都市智慧农业、智慧医疗六个新兴产业，企业数量共计50553家，占全区企业34％
                                                    </p>

                                                </div>
                                                <div class="single-box">
                                                    <div class="inner-title">
                                                        <p class="text-title">企业非核心产业</p>
                                                    </div>
                                                    <p class="text-content">
                                                        非核心产业指2+4+6产业外的领域的企业，经过统计汇总后，按照国民经济行业分类进行的领域分析，企业数量共计95744家，占全区企业66％。
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </mainImage>

                    </div>

                </div>
                <div class="clearfix"></div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="企业档案" name="third">
            <div class="wrapper main-wrapper row">
                <section class="box nobox marginBottom0">
                    <div class="content-body" style="width: 100%;">
                        <div class="row sift " style="height: 100px;">
                            <div class="content">
                                <h4 class="title">丰台区企业</h4>
                                <div class="sift-content">
                                    <el-select v-model="scaleValue" placeholder="按企业规模筛选" size="large" style="width: 160px;" class="enterprise-scale-select">
                                      <el-option v-for="item in scaleFiltering" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-select v-model="timeValue" placeholder="按注册时间筛选" size="large" style="width: 160px;" class="register-time-select">
                                      <el-option v-for="item in timeFiltering" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-select v-model="capitalValue" placeholder="按注册资本筛选" size="large" style="width: 160px;" class="registered-capital-select">
                                      <el-option v-for="item in capitalFiltering" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-select v-model="aptitudeValue" placeholder="按企业资质筛选" size="large" style="width: 250px;" class="enterprise-qualification-select">
                                      <el-option v-for="item in aptitudeFiltering" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-select v-model="industryValue" placeholder="按产业分类筛选" size="large" style="width: 160px;" class="industry-classification-select">
                                      <el-option v-for="item in industryClass" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-select v-model="sectorValue" placeholder="按行业分类筛选" size="large" style="width: 160px;" class="sector-classification-select">
                                      <el-option v-for="item in sectorClass" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                    <el-button type="primary">重置</el-button>
                                </div>

                            </div>
                        </div>
                        <div class="table">
                            <div class="top">
                                <el-button type="primary" style="margin: 20px 0;">总数量 &nbsp;|
                                    &nbsp;<span>205281</span></el-button>
                                <div class="search">
                                    <input type="text" placeholder="请输入企业名称" class="search-input">
                                    <el-button type="primary">查询</el-button>
                                </div>
                            </div>

                            <el-table :data="tableData" border style="width: 100%" stripe>
                                <el-table-column type="selection" width="55" align="center" />
                                <el-table-column prop="name" label="企业名称" align="center" width="200" />
                                <el-table-column prop="time" label="成立时间" align="center" width="150" />
                                <el-table-column prop="address" label="注册地址" align="center" />
                                <el-table-column prop="scale" label="企业规模" align="center" width="100" />
                                <el-table-column prop="registeredCapital" label="注册资本" align="center" width="100" />
                                <el-table-column prop="classify" label="产业分类" align="center" width="200" />
                                <el-table-column prop="hangye" label="行业分类" align="center" width="200" />
                         
                            <el-table-column prop="qualification" label="企业资质" align="center" width="200" />
                                <el-table-column prop="collection" label="收藏" align="center" width="80">
                                    <el-switch v-model="switchValue" />
                                </el-table-column>
                                <el-table-column prop="view" label="查看" align="center" width="80">
                                    <template #default="scope">
                                        <el-button size="small" type="danger" @click="handleView(scope.$index)">
                                            查看
                                        </el-button>
                                        <!-- <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                                            <span>企业报告</span>
                                        </el-drawer> -->
                                    </template>
                                </el-table-column>

                            </el-table>
                            <div class="demo-pagination-block" style="margin: 30px 0;">
                                <el-pagination background layout="prev, pager, next" :total="1000" :pager-count="11" />
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </el-tab-pane>
        <el-tab-pane label="招商专题" name="fourth">招商专题</el-tab-pane>
    </el-tabs>
</template>

<script>
import {gettingMethod,postingMethod,puttingMethod,deleteMethod,postingMethodCancel,postCancel} from '@/api/apiProxy.js'
import smallCard from '@/components/scCard/smallCard'
import smallCardHover from '@/components/scCard/smallCardHover'
import mainImage from '@/components/scCard/mainImage'
import sameCard from '@/components/scCard/sameCard'
import corporateReporting from '@/components/corporateReporting'
import tableCard from '@/components/scCard/tableCard'
import pieMap from '@/views/personalCenter/FengtaiHome/components/pieMap'
import './jquery/amcharts.js'
import './jquery/jquery-3.1.1.min.js'
import './jquery/serial.js'
import './jquery/toastr.min.js'
import $ from 'jquery'
import 'jquery-sparkline'
export default {
    components: {
        smallCard,
        smallCardHover,
        mainImage,
        sameCard,
        tableCard,
        pieMap,
        corporateReporting
    },
    data() {
        return {
            switchValue: false,
            currentPage: 1,
            pageSize: 100,
            activeName: 'first',
            detailsSave: "false",
            selectedOption: '按企业规模筛选',
            tableData: [
                {
                    name: '五峰正浩工贸有限公司',
                    time: '2012-07-11',
                    address: '五峰土家族自治县湾潭镇小凤池村三组',
                    scale: '微型',
                    registeredCapital: '100',
                    classify: '轨道交通',
                    hangye:"制造业",
                    qualification:"高新技术企业-国家企业技术中心"
                },

            ],
            tableColumns: [
                { prop: 'DealIDNumber', label: 'Deal ID Number', width: '180' },
                { prop: 'TradeTime', label: 'Trade Time', width: '180' },
                { prop: 'Status', label: 'Status' },
                { prop: 'LastTrade', label: 'Last Trade' }
            ],
            // 按照企业规模筛选
            scaleValue: '',
            scaleFiltering: [
                { value: '大型', label: '大型' },
                { value: '中型', label: '中型' },
                { value: '小型', label: '小型' },
                { value: '微型', label: '微型' },
            ],
            // 按注册时间筛选
            timeValue: '',
            timeFiltering: [
                { value: '3个月内', label: '3个月内' },
                { value: '半年内', label: '半年内' },
                { value: '1年以内', label: '1年以内' },
                { value: '3-5年', label: '3-5年' },
                { value: '5-10年', label: '5-10年' },
                { value: '10年以上', label: '10年以上' },
            ],
            // 按注册资本筛选
            capitalValue: '',
            capitalFiltering: [
                { value: '0-100万', label: '0-100万' },
                { value: '100-200万', label: '100-200万' },
                { value: '200-500万', label: '200-500万' },
                { value: '500-1000万', label: '500-1000万' },
                { value: '1000-5000万', label: '1000-5000万' },
                { value: '5000万以上', label: '5000万以上' },
            ],
            // 按企业资质筛选
            aptitudeValue: '',
            aptitudeFiltering: [
                { value: '高新技术企业', label: '高新技术企业' },
                { value: '科技部科技型中小企业', label: '科技部科技型中小企业' },
                { value: '国家级制造业单项冠军示范企业', label: '国家级制造业单项冠军示范企业' },
                { value: '国家级制造业单项冠军产品企业', label: '国家级制造业单项冠军产品企业' },
                { value: '国家级制造业单项冠军培育企业', label: '国家级制造业单项冠军培育企业' },
                { value: '国家企业技术中心', label: '国家企业技术中心' },
                { value: '国家技术创新示范企业', label: '国家技术创新示范企业' },
                { value: '国家级科技企业孵化器', label: '国家级科技企业孵化器' },
                { value: '国家创投空间', label: '国家创投空间' },
                { value: '国家级专精特新“小巨人”企业', label: '国家级专精特新“小巨人”企业' },
                { value: '国家级重点实验室', label: '国家级重点实验室' },
                { value: '中国独角兽企业', label: '中国独角兽企业' },
                { value: '上市企业-汇总', label: '上市企业-汇总' },
                { value: '上市企业-A股', label: '上市企业-A股' },
                { value: '上市企业-港股', label: '上市企业-港股' },
                { value: '上市企业-美股', label: '上市企业-美股' },
                { value: '上市企业-新三板', label: '上市企业-新三板' },
                { value: '上市企业-新四板', label: '上市企业-新四板' },
                { value: '中小企协AAA信用', label: '中小企协AAA信用' },
                { value: '科技型初创企业', label: '科技型初创企业' },
                { value: '龙头企业', label: '龙头企业' },
                { value: '牛羚企业', label: '牛羚企业' },
                { value: '三同企业', label: '三同企业' },
                { value: '工程技术研究中心', label: '工程技术研究中心' },
                { value: '创新型企业', label: '创新型企业' },
                { value: '省级“专精特精”中小企业', label: '省级“专精特精”中小企业' },
                { value: '省级企业技术中心', label: '省级企业技术中心' },
                { value: '省级科技企业孵化器', label: '省级科技企业孵化器' },
                { value: '省级技术创新示范企业', label: '省级技术创新示范企业' },
                { value: '省级隐形冠军示范企业', label: '省级隐形冠军示范企业' },
                { value: '省级隐形冠军培育企业', label: '省级隐形冠军培育企业' },
                { value: '省级科技小巨人企业', label: '省级科技小巨人企业' },
                { value: '省级重点实验室', label: '省级重点实验室' },
                { value: '省级创新型中小企业', label: '省级创新型中小企业' },
                { value: '省级技术先进型服务企业', label: '省级技术先进型服务企业' },
                { value: '省级民营科技企业', label: '省级民营科技企业' },
                { value: '省级独角兽企业', label: '省级独角兽企业' },
                { value: '省级瞪羚企业', label: '省级瞪羚企业' },
                { value: '省级雏鹰企业', label: '省级雏鹰企业' }
            ],
            // 按产业分类筛选
            industryValue: '',
            industryClass: [
                { value: '轨道交通', label: '轨道交通' },
                { value: '航空航天', label: '航空航天' },
            ],
            // 按行业分类筛选
            sectorValue: '',
            sectorClass: [
                { value: '建筑业', label: '建筑业' },
                { value: '交通运输、仓储和邮政业', label: '交通运输、仓储和邮政业' },
                { value: '教育', label: '教育' },
                { value: '金融业', label: '金融业' },
                { value: '居民服务、修理和其他服务业', label: '居民服务、修理和其他服务业' },
                { value: '科学研究和技术服务业', label: '科学研究和技术服务业' },
                { value: '农、林、牧、渔业', label: '农、林、牧、渔业' },
                { value: '批发和零售业', label: '批发和零售业' },
                { value: '水利、环境和公共设施管理业', label: '水利、环境和公共设施管理业' },
                { value: '卫生和社会工作', label: '卫生和社会工作' },
                { value: '文化、体育和娱乐业', label: '文化、体育和娱乐业' },
                { value: '信息传输、软件和信息技术服务业', label: '信息传输、软件和信息技术服务业' },
                { value: '制造业', label: '制造业' },
                { value: '住宿和餐饮业', label: '住宿和餐饮业' },
                { value: '租赁和商务服务业', label: '租赁和商务服务业' },
                { value: '采矿业', label: '采矿业' },
                { value: '电力、热力、燃气及水生产和供应业', label: '电力、热力、燃气及水生产和供应业' },
                { value: '房地产业', label: '房地产业' },
            ]
        }
    },
    mounted() {
        this.initSparklines();
				
    },
    methods: {
			/**
			 * 20241231 Start
			 */
			archivesTableDataFn(){
				gettingMethod(`/datav3/api/v3/getUserInfo`).then(res => {
					if(res.responseCode == 200){
						
					}
				})
			},
			handleClick(v){
				if(v == 'third'){this.archivesTableDataFn();}
			},
			/**
			 * 20241231 End
			 */
			/* jQueryKnob */
			initSparklines() {
				$("#sparkline1").sparkline([14, 14, 4, 14, 10, 17, 14, 12, 9, 3, 9], {
						type: 'bar',
						barWidth: 4,
						height: '40px',
						barColor: '#fff',
						barSpacing: '5px',
						negBarColor: '#fff',
						width: '100%',
				});
				$("#sparkline1").sparkline([14, 14, 4, 14, 10, 17, 14, 12, 9, 3, 9], {
						type: 'bar',
						barWidth: 4,
						height: '40px',
						barColor: '#fff',
						barSpacing: '5px',
						negBarColor: '#fff',
						width: '100%',
				});
				$("#sparkline2").sparkline([6, 7, 2, 0, 4, 2, 4, 5, 7, 2, 4], {
						type: 'bar',
						barWidth: 4,
						height: '40px',
						barColor: '#fff',
						barSpacing: '5px',
						negBarColor: '#fff',
						width: '100%',
				});
				$("#sparkline3").sparkline([6, 10, 17, 14, 12, 2, 4, 5, 7, 2, 8], {
						type: 'bar',
						barWidth: 4,
						height: '40px',
						barColor: '#fff',
						barSpacing: '5px',
						negBarColor: '#fff',
						width: '100%',
				});
				$("#sparkline4").sparkline([5, 6, 7, 2, 0, 4, 2, 10, 17, 14, 12], {
						type: 'bar',
						barWidth: 4,
						height: '40px',
						barColor: '#fff',
						barSpacing: '5px',
						negBarColor: '#fff',
						width: '100%',
				});
				// AnCharts 4 Start visitor statistic // 
				AmCharts.makeChart("visitor", {

						type: "serial",
						hideCredits: !0,
						theme: "light",
						dataDateFormat: "YYYY-MM-DD",
						precision: 2,
						valueAxes: [{
								id: "v1",
								// title: "Visitors",
								position: "left",
								autoGridCount: !1,
								labelFunction: function (value) {
										return Math.round(value)
								}
						}, {
								id: "v2",
								// title: "New Visitors",
								gridAlpha: 0,
								position: "right",
								autoGridCount: !1
						}],
						graphs: [{
								id: "g3",
								valueAxis: "v1",
								lineColor: "#79bbff",
								fillColors: "#79bbff",
								fillAlphas: 1,
								type: "column",
								title: "企业总数量(家)",
								valueField: "sales2",
								clustered: !1,
								columnWidth: .5,
								legendValueText: "[[value]]",
								balloonText: "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
						}, {
								id: "g4",
								valueAxis: "v1",
								lineColor: "#0d5ef9",
								fillColors: "#0d5ef9",
								fillAlphas: 1,
								type: "column",
								title: "2+4+6主导产业数量(家)\n",
								valueField: "sales1",
								clustered: !1,
								columnWidth: .3,
								legendValueText: "[[value]]",
								balloonText: "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
						}, {
								id: "g1",
								valueAxis: "v2",
								bullet: "round",
								bulletBorderAlpha: 1,
								bulletColor: "#FFFFFF",
								bulletSize: 5,
								hideBulletsCount: 50,
								lineThickness: 2,
								lineColor: "#0df3a3",
								type: "smoothedLine",
								title: "国高新企业数量(家)",
								useLineColorForBulletBorder: !0,
								valueField: "market1",
								balloonText: "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
						}, {
								id: "g2",
								valueAxis: "v2",
								bullet: "round",
								bulletBorderAlpha: 1,
								bulletColor: "#FFFFFF",
								bulletSize: 5,
								hideBulletsCount: 50,
								lineThickness: 2,
								lineColor: "#fe5d70",
								dashLength: 5,
								title: "大型企业数量(家)",
								useLineColorForBulletBorder: !0,
								valueField: "market2",
								balloonText: "[[title]]<br /><b style='font-size: 130%'>[[value]]</b>"
						}],
						chartCursor: {
								pan: !0,
								valueLineEnabled: !0,
								valueLineBalloonEnabled: !0,
								cursorAlpha: 0,
								valueLineAlpha: .2
						},
						categoryField: "date",
						categoryAxis: {
								parseDates: true,
								minPeriod: "YYYY", // 按年份分组
								dashLength: 1,
								minorGridEnabled: true,
								labelFunction: function (date) {
										if (date instanceof Date && !isNaN(date.getTime())) {
												return date.getFullYear();
										} else if (typeof date === 'string') {
												var parsedDate = new Date(date);
												if (!isNaN(parsedDate.getTime())) {
														return parsedDate.getFullYear();
												}
										}
										return '';
								}
						},
						legend: {
								useGraphSettings: !0,
								position: "top",
								useHTML: true,
								maxColumns: 2,

						},
						balloon: {
								borderThickness: 1,
								cornerRadius: 5,
								shadowAlpha: 0
						},
						dataProvider: [{
								date: "2013-01-16",
								market1: 154,
								market2: 345,
								sales1: 6732,
								sales2: 23045
						}, {
								date: "2014-01-17",
								market1: 378,
								market2: 545,
								sales1: 6933,
								sales2: 9045
						}, {
								date: "2015-01-18",
								market1: 245,
								market2: 678,
								sales1: 14900,
								sales2: 23045
						}, {
								date: "2016-01-19",
								market1: 354,
								market2: 354,
								sales1: 9807,
								sales2: 13045
						}, {
								date: "2017-01-20",
								market1: 402,
								market2: 678,
								sales1: 6933,
								sales2: 23045
						}, {
								date: "2018-01-21",
								market1: 245,
								market2: 545,
								sales1: 2545,
								sales2: 33045
						}, {
								date: "2019-01-22",
								market1: 354,
								market2: 678,
								sales1: 5678,
								sales2: 9045
						}, {
								date: "2020-01-23",
								market1: 145,
								market2: 354,
								sales1: 854,
								sales2: 1045
						}, {
								date: "2021-01-24",
								market1: 78,
								market2: 545,
								sales1: 545,
								sales2: 945
						}, {
								date: "2022-01-25",
								market1: 54,
								market2: 378,
								sales1: 745,
								sales2: 3045
						}, {
								date: "2023-01-26",
								market1: 8,
								market2: 154,
								sales1: 1745,
								sales2: 2045
						},
						{
								date: "2024-01-27",
								market1: 0,
								market2: 78,
								sales1: 746,
								sales2: 3045
						}
						]
				});
			},
			handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
			},
			handleCommand(command) {
					console.log(command)
			},
			navigateToTargetPagemb() {

					//目标客户池
					this.$router.push('/crm/pool/customer');

			},
			navigateToTargetPagewdsc() {

					//我的收藏
					this.$router.push('/enterprise/store');

			},
			navigateToTargetPagexs() {

					//线索管理
					this.$router.push('/office/aitask/manage');
			},
			navigateToTargetPagexsfp() {

					//线索分派
					this.$router.push('/office/aitask/allocation');
			},
			navigateToTargetPagexsgj() {

					//线索跟进
					this.$router.push('/office/aitask/hold');
			},
			navigateToTargetPagewdxs() {
					//我的线索
					this.$router.push('/office/aitask/search');
			},
			navigateToTargetPagebb() {

					//客户报备
					this.$router.push('/crm/customer');
			},
			navigateToTargetPagelx() {

					//联系客户
					this.$router.push('/crm/contract');
			},
			navigateToTargetPagelxrgl() {

					//联系人管理
					this.$router.push('/crm/linkman');
			},
			navigateToTargetPagexjgl() {

					//询价管理
					this.$router.push('/crm/inquiry');
			},
			navigateToTargetPagebjgl() {

					//报价管理
					this.$router.push('/crm/quotation');
			},
			navigateToTargetPagebjsp() {

					//报价审批
					this.$router.push('/crm/quotation/approved');
			},
			navigateToTargetPagezc() {
					//招商政策
					this.$router.push('/crm/policytype');
			},
			navigateToTargetPagesq() {
					//政策申请
					this.$router.push('/crm/policyprogress');
			},
			navigateToTargetPagesqjd() {
					//申请进度
					this.$router.push('/crm/policyapply');
			},
			navigateToTargetPageclgl() {
					//策略管理
					this.$router.push('/attractinvestment/note');
			},
			navigateToTargetPageyygl() {
					//预约管理
					this.$router.push('/attractinvestment/appointment');
			},
			navigateToTargetPagerzgl() {
					//入驻管理
					this.$router.push('/attractinvestment/checkin');
			},
			navigateToTargetPagesfgl() {
					//收费管理
					this.$router.push('/attractinvestment/chargeManage');
			},
			navigateToTargetPagetzgl() {
					//退租管理
					this.$router.push('/attractinvestment/checkoutManage');
			},
			//查看
			handleView(index) {
					this.drawerIndex = index; // Open drawer for the specific row
			},
			handleDrawerClose(newVal) {
					if (!newVal) {
							this.drawerIndex = null; // Close drawer
					}
			},
    },
}
</script>

<style scoped lang="scss">
/* 引入css */
@import "@/views/personalCenter/css/index.css";

.numbers {
    font-size: 35px;
}

::v-deep .el-collapse-item__header {
    font-size: 20px !important;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

::v-deep .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
    height: 60px;
    line-height: 90px;
}

::v-deep .el-tabs__item {
    font-size: 30px;
}

::v-deep .el-collapse-item__header {
    font-size: 20px !important;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

::v-deep .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
    height: 60px;
    line-height: 90px;
}

::v-deep .el-tabs__item {
    font-size: 30px;
}

.content-body .sift,
.table {
    background-color: #fff;
    // height: 100px;
    border-radius: 7px;
    width: 98%;
    margin: auto;
    border: 1px solid #b7c6d8;
    margin-bottom: 16px;
    box-shadow: rgba(76, 78, 100, .2) 0px 2px 10px 0px;
    padding: 0 20px;

    .title {
        font-weight: 600;
        font-size: 20px;
    }

}

.table {
    margin-top: 50px;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search {
            display: flex;
            align-items: center;

            input.search-input {
                outline: none;
                width: 300px;
                height: 32px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }
        }
    }
}

::v-deep .el-dropdown {
    margin-right: 20px;
}

::v-deep .el-select {
    margin-right: 20px
}

::v-deep .el-input-group__append button.el-button {
    background-color: #409EFF;
    color: #fff;
}

// 修改每个筛选的背景颜色
::v-deep .enterprise-scale-select .el-input__wrapper {
    background-color: #7e8c9e;
}

::v-deep .register-time-select .el-input__wrapper {
    background-color: #409EFF
}

::v-deep .registered-capital-select .el-input__wrapper {
    background-color: #e4515e;
}

::v-deep .enterprise-qualification-select .el-input__wrapper {
    background-color: #2c998d;
}

::v-deep .industry-classification-select .el-input__wrapper {

    background-color: #3d5ae6;
}

::v-deep .sector-classification-select .el-input__wrapper {

    background-color: #9d73fa;
}

// 改变下拉框的边框
::v-deep .el-input__wrapper {
    border-radius: 6px;
    box-shadow: none;
}
// 改变输入框placeholder颜色
::v-deep .el-input__inner::placeholder {
    color: #fff;
}
// 改变选择后输入框中的颜色
::v-deep .el-input__inner {
    color: #fff;
}
// 翻页居中
::v-deep .el-pagination {
    justify-content: center;
}
.content {
    margin-top: 10px;
}
.chart-container {
    position: relative;
}
.custom-label {
    position: absolute;
    left: 55px;
    bottom: 6px;
    color: #000000;
    font-size: 12px;
}
.pie {
    width: 100%;

    .pie-box {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .map-item {
            width: 66%;
        }

        .map-text {
            width: 33%;
            background: url('../../../assets/overs02.png') center center / cover;
            padding: 20px;
            .text-inner {
                margin: auto;

                .top-text,
                .single-box {
                    margin-bottom: 30px;
                }

                p.text-title {
                    font-size: 16px;
                    font-weight: 600;
                    margin: 10px 0px;
                }

                p.text-content {
                    color: #686d7d;
                    font-size: 13px;
                }
            }

        }
    }
}
</style>